<template>
    <div class="user-profile-page">
        <!-- 账号设置 -->
        <el-card>
            <FrontPersonalMessage />
        </el-card>
        <!-- 基本信息 -->
        <el-card>
            <div class="top">
                <h2>基本信息</h2>
                <el-button link type="primary" @click="handleEdit">编辑</el-button>
            </div>
            <el-descriptions :column="isMobile ? 2 : 3" size="default" direction="vertical">
                <el-descriptions-item label="姓名">{{ userInfo.name || '未填写' }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ userInfo.gender || '未填写' }}</el-descriptions-item>
                <el-descriptions-item label="年龄">{{ userInfo.age || '未填写' }}</el-descriptions-item>
                <el-descriptions-item label="手机号码">{{ userInfo.phone || '未填写' }}</el-descriptions-item>
                <el-descriptions-item label="电子邮箱">{{ userInfo.email || '未填写' }}</el-descriptions-item>
                <el-descriptions-item label="联系地址">{{ userInfo.address || '未填写' }}</el-descriptions-item>
                <el-descriptions-item label="最高学历">{{ userInfo.academicQualification || '未填写' }}</el-descriptions-item>
                <el-descriptions-item label="毕业院校">{{ userInfo.graduationSchool || '未填写' }}</el-descriptions-item>
                <el-descriptions-item label="专业">{{ userInfo.major || '未填写' }}</el-descriptions-item>
                <el-descriptions-item label="工作经验">{{ userInfo.workExperience || '未填写' }}</el-descriptions-item>
            </el-descriptions>
        </el-card>
         <!-- 编辑基本信息对话框 -->
        <el-dialog v-model="dialogVisible" title="编辑基本信息" class="info-dialog" width="620px">
            <el-form :model="editForm" :rules="rules" ref="editFormRef" label-width="120px">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="editForm.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-radio-group v-model="editForm.gender">
                    <el-radio :label="'男'">男</el-radio>
                    <el-radio :label="'女'">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model.number="editForm.age" type="number" placeholder="请输入年龄"></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input v-model="editForm.phone" disabled></el-input>
                </el-form-item>
                <el-form-item label="电子邮箱">
                    <el-input v-model="editForm.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item label="联系地址">
                    <el-input v-model="editForm.address" placeholder="请输入联系地址"></el-input>
                </el-form-item>
                <el-form-item label="最高学历" prop="academicQualification">
                    <el-select v-model="editForm.academicQualification" placeholder="请选择学历">
                    <el-option v-for="item in educationOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="毕业院校" prop="graduationSchool">
                    <el-input v-model="editForm.graduationSchool" placeholder="请输入毕业院校"></el-input>
                </el-form-item>
                <el-form-item label="专业" prop="major">
                    <el-input v-model="editForm.major" placeholder="请输入专业"></el-input>
                </el-form-item>
                <el-form-item label="工作经验" prop="major">
                    <el-select v-model="editForm.workExperience" placeholder="请选择工作经验">
                        <el-option v-for="item in workExperienceOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
              </span>
            </template>
          </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { FrontPersonalMessage } from '@ruifox-cms/components'
import { ElMessage } from 'element-plus'
import { updateUserInfo, selectUserInfo } from '@/api/profile'
import { useStore } from 'vuex' 
const store = useStore();
// 表单引用
const editFormRef = ref(null)
const dialogVisible = ref(false)

// 编辑表单数据
const editForm = ref({
    id:null,
    name: '',
    gender: '',
    age: null,
    phone: '',
    email: '',
    address: '',
    academicQualification: '',
    graduationSchool: '',
    major: '',
    workExperience:''
})

// 学历选项
const educationOptions = ref([
    { value: '初中及以下', label: '初中及以下' },
    { value: '中专/中技', label: '中专/中技' },
    { value: '高中', label: '高中' },
    { value: '大专', label: '大专' },
    { value: '本科', label: '本科' },
    { value: '硕士', label: '硕士' },
    { value: '博士', label: '博士' },
    { value: '其他', label: '其他' }
])
//工作经验选项
const workExperienceOptions = ref([
    { value: '应届生', label: '应届生' },
    { value: '1-3年', label: '1-3年' },
    { value: '3-5年', label: '3-5年' },
    { value: '5年以上', label: '5年以上' }
])

// 表单验证规则
const rules = ref({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' },
    { type: 'number', message: '年龄必须为数字值', trigger: 'blur' }
  ],
  academicQualification: [
    { required: true, message: '请选择最高学历', trigger: 'change' }
  ],
  graduationSchool: [
    { required: true, message: '请输入毕业院校', trigger: 'blur' }
  ],
  major: [
    { required: true, message: '请输入专业', trigger: 'blur' }
  ],
  workExperience: [
    { required: true, message: '请选择工作经验', trigger: 'change' }
  ]
})
// 状态管理
const userInfo = ref({
    name: '',
    gender: '',
    age: null,
    phone: '',
    email: '',
    address: '',
    academicQualification: '',
    graduationSchool: '',
    major: '',
    workExperience:''
})
// 获取用户基本信息
const getUserBasicInfo = async () => {
  try {
    let res = await selectUserInfo()
    
    // 从账号信息中获取手机号码
    editForm.value.phone = store.state.base.userInfo.account
    userInfo.value = res.data
    
    // 初始化编辑表单数据
    editForm.value = { ...userInfo.value }
  } catch (error) {
    ElMessage.error('获取用户信息失败，请稍后重试')
    console.error(error)
  }
}

// 处理编辑按钮点击
const handleEdit = () => {
  editForm.value = { ...userInfo.value }
  dialogVisible.value = true
}

// 提交表单
const submitForm = () => {
  editFormRef.value.validate(valid => {
    if (valid) {
        updateUserInfo(editForm.value).then(() => {
            ElMessage.success('基本信息更新成功')
            // 更新用户信息
            userInfo.value = { ...editForm.value }
            // 关闭对话框
            dialogVisible.value = false
        }).catch(error => {
            ElMessage.error('更新失败: ' + error.message)
        })
    } else {
      ElMessage.error('请完成必填项')
      return false
    }
  })
}
const isMobile = ref(false)
const checkScreenSize = () => {
    isMobile.value = window.innerWidth < 960;
}
// 组件挂载后获取用户基本信息
onMounted(() => {
  getUserBasicInfo()
  // 添加窗口大小变化监听
  window.addEventListener('resize', checkScreenSize);
})
onUnmounted(() => {
  window.removeEventListener('resize', checkScreenSize)
})
</script>

<style lang="scss" scoped>
.user-profile-page {
    .personal-message-setting {
        background-color: transparent;
        padding:0;
    }
    .el-card {
        margin-bottom: px2rem(20);
        border-color: transparent;
    }
    .el-card__body {
        .top {
            display: flex;
            align-items:center;
            justify-content: space-between;
            margin: 0 0 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid #f0f0f0;
            h2 {
                font-size: 20px;
                color: #333;
            }
        }
    }
}
@media (max-width:960px) {
    .info-dialog {
        width: 80%;
    }
}
</style>